<template>
	<div id="carriage-rule">
    <!-- 头部 -->
    <div class="header">
      <span class="font fl">默认运费</span>
      <w-input rule="isEmpty|onlyIntNo0" error="必填|大于0数字" @input="emitToAddTmpl" v-model="global.trans_weight" class="input fl"></w-input>
      <span class="font fl">{{unit}}内</span>
      <w-input rule="isEmpty|onlyIntNo0" error="必填|大于0数字" @input="emitToAddTmpl" v-model="global.trans_fee" class="input fl"></w-input>
      <span class="font fl">元，每增加</span>
      <w-input rule="isEmpty|onlyIntNo0" error="必填|大于0数字" @input="emitToAddTmpl" v-model="global.trans_add_weight" class="input fl"></w-input>
      <span class="font fl">{{unit}}，增加运费</span>
      <w-input rule="isEmpty|onlyIntNo0" error="必填|大于0数字" @input="emitToAddTmpl" v-model="global.trans_add_fee" class="input fl"></w-input>
      <span class="font fl">元</span>
    </div>
    <!-- 主体内容 -->
    <table class="table">
      <thead v-show="transInfo.length > 0">
        <tr>
          <th>运送到</th>
          <th v-if="type == 0">首件数（件）</th>
          <th v-else>首重量（kg）</th>
          <th>首费（元）</th>
          <th v-if="type == 0">续件数（件）</th>
          <th v-else>续重量（kg）</th>
          <th>续费（元）</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(trans, index) in transInfo" v-bind:key="index">
          <td>
            {{trans.city_name}}
            <span class="cr fr" @click="selectAreaInBox(trans)">编辑</span>
          </td>
          <td><w-input class="input" rule="isEmpty|onlyIntNo0" error="必填|大于0数字" @input="emitToAddTmpl" v-model="trans.trans_weight"></w-input></td>
          <td><w-input class="input" rule="isEmpty|onlyIntNo0" error="必填|大于0数字" @input="emitToAddTmpl" v-model="trans.trans_fee"></w-input></td>
          <td><w-input class="input" rule="isEmpty|onlyIntNo0" error="必填|大于0数字" @input="emitToAddTmpl" v-model="trans.trans_add_weight"></w-input></td>
          <td><w-input class="input" rule="isEmpty|onlyIntNo0" error="必填|大于0数字" @input="emitToAddTmpl" v-model="trans.trans_add_fee"></w-input></td>
          <td><span class="cr" @click="deleteTrans(index)">删除</span></td>
        </tr>
        <tr>
          <td colspan="6" class="tl">
            <span class="oparation" @click="addNewArea">为指定地区城市设置运费</span>
          </td>
        </tr>
      </tbody>
    </table>
    <area-box @close="closeSelectArea" v-model="areaLists" @sure="getSelectedArea" :toast="isShowSelectArea"></area-box>
  </div>
</template>

<script>
// 导入地域选择组件
import areaBox from './AreaBox'

// 判断是否在数组中接口
import { inArray } from '../../../common/util'

export default {
  components: {
    areaBox
  },
  props: {
    /* 当前类型：0 按件计费 1 按重量计费 */
    type: {
      type: Number,
      default: 0
    },
    value: {
      type: [Array, String],
      default: () => { return [] }
    }
  },
  mounted() {
    if (this.value && this.value.length > 0) {
      this.value.forEach((v) => {
        if (v.city_id == -1) {
          this.global = v
        } else {
          this.transInfo.push(v)
        }
      })
    }
  },
  data() {
    return {
      editTrans: [],
      areaLists: [],
      global: {
        city_id: -1,
        city_name: '中国',
        trans_fee: '',
        trans_weight: '',
        trans_add_weight: '',
        trans_add_fee: ''
      },
      isShowSelectArea: false,
      transInfo: []
    }
  },
  computed: {
    unit() {
      // 如果是按件计费，则单位是件
      if (this.type == 0) {
        return '件'
      }
      // 如果是按重量计费，则但是是KG
      return 'kg'
    }
  },
  methods: {
    /**
     * 关闭选择地域弹框
     */
    closeSelectArea() {
      this.isShowSelectArea = false
    },

    /**
     * 选择区域
     *
     * @params { Object } trans 当前操作的对象
     */
    selectAreaInBox(trans) {
      this.isShowSelectArea = true
      this.editTrans = trans
    },

    /**
     * 将选择的区域放到
     *
     * @params { Array } list 地域列表
     */
    getSelectedArea(list) {
      let cityNames = []
      let cityIds = []

      list.forEach((v) => {
        // 如果不在数组中，则将地区名称放在数组中
        if (!inArray(cityNames, v.name)) {
          cityNames.push(v.name)
        }
        cityIds.push(v.id)
      })

      this.editTrans.city_name = cityNames.join(',')
      this.editTrans.city_id = cityIds.join(',')
      this.emitToAddTmpl()
    },

    /**
     * 新增地址
     */
    addNewArea() {
      // 如果最后一个添加的地区还没有编辑，则不让其继续添加
      if (this.transInfo.length > 0 && !this.transInfo[this.transInfo.length - 1].city_id) {
        return
      }

      // 添加新地址
      this.transInfo.push(
        {
          city_id: '',
          city_name: '未添加地区',
          trans_fee: '',
          trans_weight: '',
          trans_add_weight: '',
          trans_add_fee: ''
        }
      )
    },

    /**
     * 删除当前模板
     *
     * @params { Number } index 索引
     */
    deleteTrans(index) {
      // debugger
      // 如果只有一个，则直接清空
      if (this.transInfo.length == 1) {
        this.transInfo = []
      } else {
        // 删除数据
        this.transInfo.splice(index, 1)
      }
      this.emitToAddTmpl()
    },

    /**
     * 发送给上级组件
     */
    emitToAddTmpl() {
      this.$emit('input', this.transInfo.concat(this.global))
    }
  }
}
</script>

<style lang="scss" scoped>
#carriage-rule {
  min-width: 848px;

  .cr {
    color: #F20685;
    cursor: pointer;
  }

  .fr {
    float: right;
  }

  .fl {
    float: left;
  }
  
  .input {
    display: inline-block;
    width: 56px;
    margin: 0px 12px;
  }

  .header {
    background-color: rgba(242, 6, 133, 0.2);
    border: 1px solid rgba(242, 6, 133, 0.2);
    border-bottom: 0px;
    color: #666666;
    height: 42px;
    padding: 6px 32px;

    .font {
      display: inline-block;
      height: 30px;
      line-height: 30px;
    }
  }

  .table {
    th {
      background: #FFFFFF;
      border-top: 0px;
      color: #666666;
    }

    td {
      padding: 10px 0px;

      &.tl {
        text-align: left;
        padding: 16px 54px;
      }

      .oparation {
        color: #47BDF4;
        cursor: pointer;
        margin-right: 36px;
      }
    }
  }
}
</style>